<script setup>
import { computed, ref, reactive } from 'vue'
import useLoginStore from '@/store/user/index.js'
import { useRoute } from 'vue-router'
import { breadPathName } from '@/utils/addRoute.js'
import router from '@/router/index.js'
import { removeLocalStore } from '@/utils/localUser.js'
import { MENUS, TOKEN, USERINFO } from '@/utils/const.js'
import { updatePasswordr } from '@/utils/api.js'


//定义折叠导航栏时间
const $emits = defineEmits(['foldSide'])
//折叠图标切换
const isFold = ref(true)
const isFoldBtn = () => {
  isFold.value = !isFold.value
  $emits('foldSide', isFold.value)
}

//面包屑
const route = useRoute()
const loginStore = useLoginStore()
const pathName = computed(() => breadPathName(route.path, loginStore.menus))

const ruleForm = reactive({
  oldPassword: '',
  newPassword: '',
})
const rules = reactive({
  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
})

//个人中心展示
const changePersonBtn = () => {
  router.push('/main/person')
}
const dialogVisible = ref(false)
const name = JSON.parse(localStorage.getItem('loginInfo')).userName
//退出登录
const loginOut = () => {
  // await loginStore.loginOutAction()
  //移除本地存储的基本信息
  // removeLocalStore(TOKEN)
  // removeLocalStore(MENUS)
  // removeLocalStore(USERINFO)
  localStorage.removeItem('loginInfo')
  //跳转到登录页面
  window.location.replace("/login");
}

const ruleFormRef = ref()
const setPass = () => {
  dialogVisible.value = true
}

const submit = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      updatePasswordr(ruleForm).then((res) => {
        if (res.msg == 'ok') {
          ElMessage.success('操作成功')
          dialogVisible.value = false
        }
      })
    } else {

    }
  })
}
</script>

<template>
  <div class="top-bar">
    <div class="left">
      <el-icon size="25px">
        <component :is="isFold ? 'Expand' : 'Fold'" @click="isFoldBtn"></component>
      </el-icon>
      <el-breadcrumb separator-icon="ArrowRight">
        <template v-for="(item, index) in pathName" :key="index">
          <el-breadcrumb-item :to="item.path">{{ item.name }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>

    <div class="right">
      <!-- <img src="../../../assets/images/login.png" alt="#" /> -->
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ name }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item @click="changePersonBtn">个人中心</el-dropdown-item> -->
            <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
            <el-dropdown-item @click="setPass">修改密码</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="修改密码" width="600">
    <div>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" size="large">
        <el-form-item label="账号" prop="userName">
          {{ name }}

        </el-form-item>
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="ruleForm.oldPassword" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="ruleForm.newPassword" type="password" placeholder="请再次输入密码" show-password />
        </el-form-item>


      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-divider />

</template>

<style scoped lang="less">
.top-bar {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    .el-icon {
      margin-right: 40px;
    }

    display: flex;
    align-items: center;
  }

  .right {
    display: flex;
    align-items: center;
    margin-right: 20px;

    img {
      margin-right: 5px;
      width: 40px;
      height: 40px;
    }
  }
}
</style>
